<script setup>
import { ref, onMounted, computed } from 'vue'
import { getNewapptime, postRescovid } from '@/apis/apis.js'
import { showToast } from '@/utils/utils.js'
const region = ref([])
const selector = ref([
  '医疗卫生人员',
  '卫生系统内工作的其他人员',
  '因公出国人员',
  '对外劳务派遣人员',
  '留学生',
  '因私出国人员',
  '海关边检人员',
  '公安系统,消防人员',
  '党政机关,事业单位人员',
  '社区工作者',
  '教育工作者',
  '小学和中学学生',
  '其他人员'
])
const name = ref('')
const id_card = ref('')
const phone = ref('')
const address = computed(() => {
  return region.value.join('')
})
const crowd_sort = ref('')
const de_address = ref('')
const date = ref('')
const period = ref('')
const reserve_time = ref('')
const when = ref(-1)
const data = ref([])
const activeIndex = ref(0)
const activeDateIndex = ref(-1)
const activePeriodIndex = ref('')
const handleChangeRegion = ({ detail: { value } }) => {
  region.value = value
}
const handleChangeSelector = ({ detail: { value } }) => {
  crowd_sort.value = selector.value[value]
}
const handleChangeDate = (item, index) => {
  date.value = item.date
  activeDateIndex.value = index
}
const handleChangePeriod = (item, time, index) => {
  period.value = item.period
  reserve_time.value = `${time.start_time}-${time.end_time}`
  when.value = time.when
  activePeriodIndex.value = `${time.start_time}-${time.end_time}`
}
const handleCancel = () => {
  uni.navigateBack()
}
const handleSubmit = async () => {
  const data = {
    name: name.value,
    id_card: id_card.value,
    phone: phone.value,
    address: address.value,
    de_address: de_address.value,
    crowd_sort: crowd_sort.value,
    date: date.value,
    period: period.value,
    reserve_time: reserve_time.value,
    when: when.value
  }
  const res = await postRescovid(data)
  if (res.msg === '提交成功') {
    showToast('预约成功')
    setTimeout(() => {
      uni.navigateTo({ url: '/pages/my-service/xinguan/xinguan' })
    }, 1000)
  }
}
onMounted(async () => {
  const res = await getNewapptime()
  data.value = res.data
})
</script>

<template>
  <view class="view">
    <view class="view-form">
      <view class="view-form-item">
        <view class="view-form-item-label">姓名</view>
        <input class="view-form-item-input" placeholder="请输入姓名" v-model.trim="name" />
      </view>
      <view class="view-form-item">
        <view class="view-form-item-label">身份证</view>
        <input class="view-form-item-input" type="idcard" placeholder="请输入身份证" v-model.trim="id_card" />
      </view>
      <view class="view-form-item">
        <view class="view-form-item-label">手机号</view>
        <input class="view-form-item-input" type="tel" placeholder="请输入手机号" v-model.trim="phone" />
      </view>
      <view class="view-form-item">
        <view class="view-form-item-label">现居地址</view>
        <picker mode="region" :value="region" @change="handleChangeRegion">
          <view class="view-form-item-picker" v-if="region.length <= 0">
            <view class="view-form-item-text">请选择现居地址</view>
            <image class="view-form-item-img" src="/static/images/more.svg" mode="aspectFit"></image>
          </view>
          <view class="view-form-item-picker" v-else>
            <view class="view-form-item-text" v-for="(item, index) in region" :key="index">{{ item }}</view>
          </view>
        </picker>
      </view>
      <view class="view-form-item">
        <view class="view-form-item-label">现居详细地址</view>
        <input class="view-form-item-input" placeholder="请输入现居详细地址" v-model.trim="de_address" />
      </view>
      <view class="view-form-item">
        <view class="view-form-item-label">疫苗人群分类</view>
        <picker mode="selector" :value="crowd_sort" @change="handleChangeSelector" :range="selector">
          <view class="view-form-item-picker" v-if="crowd_sort === ''">
            <view class="view-form-item-text">请选择疫苗人群分类</view>
            <image class="view-form-item-img" src="/static/images/more.svg" mode="aspectFit"></image>
          </view>
          <view class="view-form-item-picker" v-else>
            <view class="view-form-item-text">{{ crowd_sort }}</view>
          </view>
        </picker>
      </view>
    </view>
    <view class="view-hospital" v-if="data.length > 0">
      <view class="view-hospital-name">{{ data[activeIndex].Hospital }}</view>
      <view class="view-hospital-address">{{ data[activeIndex].address }}</view>
      <scroll-view class="view-hospital-tags" scroll-x enable-flex>
        <view class="view-hospital-tag" v-for="(company, index) in data[activeIndex].company" :key="index">{{ company }}</view>
      </scroll-view>
    </view>
    <view class="view-date" v-if="data.length > 0">
      <scroll-view class="view-date-container" scroll-x enable-flex>
        <view class="view-date-item" :class="{ active: activeDateIndex === index }" v-for="(item, index) in data[activeIndex].week" :key="index" @click="handleChangeDate(item, index)">
          <view class="view-date-item-weekday">{{ item.day }}</view>
          <view class="view-date-item-day">{{ item.date }}</view>
          <view class="view-date-item-flag">{{ item.Have }}</view>
        </view>
      </scroll-view>
    </view>
    <template v-if="data.length > 0">
      <view class="view-m" v-for="(item, index) in data[activeIndex].lasting" :key="index">
        <view class="view-m-title">{{ item.period }}</view>
        <scroll-view class="view-m-container" scroll-x enable-flex>
          <view class="view-m-item" :class="{ active: activePeriodIndex === `${time.start_time}-${time.end_time}` }" v-for="(time, index) in item.time" :key="index" @click="handleChangePeriod(item, time, index)">
            <view class="view-m-item-period">{{ time.start_time }}-{{ time.end_time }}</view>
            <view class="view-m-item-remain">剩余{{ time.over }}</view>
          </view>
        </scroll-view>
      </view>
    </template>
    <view class="view-button-group">
      <button class="view-button-cancel" @click="handleCancel">取消</button>
      <button class="view-button-submit" type="primary" @click="handleSubmit">提交预约</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  // padding-bottom: 0;  
  // padding-bottom: constant(safe-area-inset-bottom);  
  // padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  padding-bottom: 200rpx;
  min-height: 100vh;
  background-color: #f0f0f0;
  .view-form {
    background-color: #fff;
    .view-form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 20rpx;
      padding: 40rpx 0;
      border-bottom: 1px solid #eee;
      .view-form-item-label {
        margin-right: 20rpx;
      }
      .view-form-item-input {
        flex: 1;
        text-align: right;
        :deep(.input-placeholder) {
          color: #ccc;
        }
      }
      .view-form-item-picker {
        display: flex;
        align-items: center;
        .view-form-item-text {
          margin-left: 10rpx;
        }
        .view-form-item-img {
          margin-left: 10rpx;
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
  .view-hospital {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .view-hospital-name {
      font-weight: bold;
    }
    .view-hospital-address {
      margin: 25rpx 0;
    }
    .view-hospital-tags {
      display: flex;
      height: 50rpx;
      white-space: nowrap;
      .view-hospital-tag {
        margin-right: 10rpx;
        padding: 5rpx 20rpx;
        height: fit-content;
        background-color: #f0f0f0;
        font-size: 28rpx;
      }
    }
  }
  .view-date {
    display: flex;
    padding: 20rpx;
    margin: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .view-date-container {
      display: flex;
      white-space: nowrap;
      .view-date-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10rpx;
        padding: 20rpx 40rpx;
        background-color: #f0f0f0;
        border-radius: 10rpx;
        &.active {
          background-color: #4176e1;
          color: #fff;
        }
        .view-date-item-day {
          margin: 10rpx 0;
        }
      }
    }
  }
  .view-m {
    padding: 20rpx;
    margin: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .view-m-title {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .view-m-container {
      display: flex;
      white-space: nowrap;
      .view-m-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10rpx;
        padding: 15rpx;
        background-color: #f0f0f0;
        border-radius: 10rpx;
        &.active {
          background-color: #4176e1;
          color: #fff;
        }
      }
    }
  }
  .view-button-group {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0 calc(20rpx + env(safe-area-inset-bottom));
    width: 750rpx;
    background-color: #fff;
    .view-button-cancel {
      width: 300rpx;
      background-color: rgba($color: #4176e1, $alpha: 0.2);
      color: #4176e1;
    }
    .view-button-submit {
      width: 300rpx;
      background-color: #4176e1;
      color: #fff;
    }
  }
}
</style>
